<template>
    <div class="subject-content">

        <el-form :model="queryParams" size="medium" ref="queryForm" label-width="75px">
            <el-form-item label="日志模块" prop="logTitle" size="mini">
                <el-input v-model="queryParams.logTitle" clearable placeholder="请输入日志模块" @keyup.enter.native="searchQuery"></el-input>
            </el-form-item>

            <el-form-item label="业务类型" prop="logBusinessType" size="mini">
                <el-select v-model="queryParams.logBusinessType" placeholder="请选择状态" clearable>
                    <el-option v-for="(item, index) in dict.dictType.log_business_type" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="操作状态" prop="logOperationStatus" size="mini">
                <el-select v-model="queryParams.logOperationStatus" placeholder="请选择状态" clearable>
                    <el-option v-for="(item, index) in dict.dictType.log_operation_status" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item size="mini">
                <el-button type="primary" icon="el-icon-search" @click="searchQuery">提交</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
            <el-table-column fixed="left" type="selection" width="55" align="center"/>
            <el-table-column label="日志id" prop="logId" sortable align="center"/>
            <el-table-column label="日志模块" prop="logTitle" align="center"/>
            <el-table-column label="业务类型" prop="logBusinessType" align="center" sortable>
                <template v-slot="scope">
                    <dictTag :options="dict.dictType.log_business_type" :value="scope.row.logBusinessType"></dictTag>
                </template>
            </el-table-column>
            <el-table-column label="请求方式" prop="requestMode" align="center"/>
            <el-table-column label="操作人员" prop="logOperationNickName" align="center"/>
            <el-table-column label="ip" prop="logOperationIp" align="center"/>
            <el-table-column label="系统" prop="os" align="center"/>
            <el-table-column label="操作状态" prop="logOperationStatus" align="center">
                <template v-slot="scope">
                    <dictTag :options="dict.dictType.log_operation_status" :value="scope.row.logOperationStatus"></dictTag>
                </template>
            </el-table-column>
            <el-table-column label="地区" prop="logOperLocation" align="center"/>
            <el-table-column label="操作时间" prop="logOperationDate" width="180" align="center"/>
            <el-table-column fixed="right"  label="操作" width="100" align="center">
                <!-- 固定列需要使用fixed属性，它接受 Boolean 值或者left right，表示左边固定还是右边固定。 -->
                <template  v-slot="scope">
                    <el-button type="text" size="small" icon="el-icon-view" @click="rowView(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <page
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="getList"
        />

        <!-- 添加或修改 文章弹出框 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
            <el-form ref="logForm" :model="logForm" size="small" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="日志描述：" prop="logDescription">{{ logForm.logDescription }}</el-form-item>
                        <el-form-item label="日志模块：" prop="logTitle">{{ logForm.logTitle }}</el-form-item>
                        <el-form-item label="请求方式：" prop="requestMode">{{ logForm.requestMode }}</el-form-item>
                        <el-form-item label="请求地址：" prop="logOperationUrl">{{ logForm.logOperationUrl }}</el-form-item>
                        <el-form-item label="业务类型：" prop="logBusinessType">
                            <dictTag :options="dict.dictType.log_business_type" :value="logForm.logBusinessType"></dictTag>
                        </el-form-item>
                        <el-form-item label="操作状态：" prop="logOperationStatus">
                            <dictTag :options="dict.dictType.log_operation_status" :value="logForm.logOperationStatus"></dictTag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="人员昵称：" prop="logOperationNickName">{{ logForm.logOperationNickName }}</el-form-item>
                        <el-form-item label="用户类型：" prop="userType">
                            <dictTag :options="dict.dictType.user_type" :value="logForm.userType"></dictTag>
                        </el-form-item>
                        <el-form-item label="操作人员：" prop="logOperationName">{{ logForm.logOperationName }}</el-form-item>
                        <el-form-item label="访问ip：" prop="logOperationIp">{{ logForm.logOperationIp }}</el-form-item>
                        <el-form-item label="浏览器：" prop="browser">{{ logForm.browser }}</el-form-item>
                        <el-form-item label="系统：" prop="os">{{ logForm.os }}</el-form-item>
                        <el-form-item label="操作地点：" prop="logOperLocation">{{ logForm.logOperLocation }}</el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="方法名称：" prop="methodName">{{ logForm.methodName }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="返回参数：" prop="jsonResult" >{{logForm.jsonResult}}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="错误消息：" prop="errorMsg" style="color: red">{{logForm.errorMsg}}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import Page from "@/components/page.vue";
import {getLogById, logList} from "@/api/admin/log";
import dictTag from "@/components/dictTag.vue";


export default {
    name: "log",
    dicts: ["log_business_type","log_operation_status","user_type"],
    components: {dictTag, Page},
    data() {
        return {
            // 遮罩层
            loading: true,
            // 导出遮罩层
            exportLoading: false,
            // 是否显示弹出层
            open: false,
            // 弹出层标题
            title: "",
            // 选中数组
            ids: [],
            // 总条数
            total: 0,
            // 查询参数  current 当前页   size 页大小
            queryParams: {
                current: 1,
                size: 10,
                logTitle: undefined,
                logBusinessType: undefined,
                logOperationStatus: undefined
            },
            //表格数据
            logList: [],
            // 表单参数
            logForm: {},

        }
    },
    methods: {

        // 根据条件分页查询日志列表
        getList() {
            logList(this.queryParams).then(res => {
                this.logList = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            })
        },


        // 搜索按钮操作
        searchQuery(){
            this.queryParams.current = 1;
            this.getList();
        },
        // 重置按钮操作
        resetQuery(){
            this.resetForm("queryForm");
            this.searchQuery();
        },


        // 行工具--查看
        rowView(row){
            const logId = row.logId
            getLogById(logId).then(res =>{
                this.logForm = res.data;
                this.title = "查看日志";
                this.open = true;
            })
        },


        //多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.logId)
        },
    },
    created() { //初始化
        this.getList();
    }

}
</script>

<style scoped>
.el-row {
    display: inline-block;
}
.el-form-item {
    display: inline-block;
}
</style>
